<template>

  <div id="order" class="order">
    <!-- header -->
    <yd-navbar slot="navbar" fixed>
      <router-link to="/user" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </router-link>
      <span slot="center" class="header_text" style="font-size:18px">我的订单</span>
    </yd-navbar>
    <!-- content -->
    <div class="content-order" fixed>
      <yd-tab>
        <yd-tab-panel label="全部" :active="active1">
          <div v-if="orderData.length==0">
            <div class="space-100"></div>无相关订单信息。
          </div>
          <div v-for="list in orderData" class="bigCard" v-if="orderData.length>0">
            <div style="text-align:left;">
              <span style="display:inline-block;padding:10px;">订单号：{{list.orderNo}}</span>
              <span style="display:inline-block;float:right;padding:10px;color:#555;font-weight:600">{{list.statusDesc}}</span>
            </div>
            <div v-for="item in list.orderItemVoList">
              <el-card style="padding-bottom:15px;text-align:left">
                <img :src="item.productImage" class="demo-checklist-img" style="display:inline-block;float:left">
                <div style="display:inline-block;margin-left:5px;height:100px;width:70%">
                  <span class="order-text">{{item.productName}}</span><br/>
                  <span class="order-text" style="color: #ccc;">颜色：粉色系  &emsp;  尺码：s</span><br/>
                  <span class="order-text" style="font-size:15px">￥{{item.totalPrice}} </span>
                  <span style="float:right">
                    <span>x {{item.quantity}}</span>
                  </span>
                </div>
              </el-card>
            </div>
            <div class="btn" v-if="list.statusDesc=='未支付'">
              <a @click="del(list)">取消订单</a><a style="color:#FF4040;border-color:#FF4040 !important">付款</a>
            </div>
            <div class="btn" v-if="list.statusDesc=='已付款'">
              <a>再次购买</a><a>查看物流</a><a style="color:#FF4040;border-color:#FF4040 !important">确认收货</a>
            </div>
            <div class="btn" v-if="list.statusDesc=='已取消'">
              <a style="color:#FF4040;border-color:#FF4040 !important">删除订单</a>
            </div>
            <div class="btn" v-if="list.statusDesc=='已完成'">
              <a style="color:#FF4040;border-color:#FF4040 !important">再次购买</a>
            </div>
          </div>
        </yd-tab-panel>
        <yd-tab-panel label="待付款" :active="active2">
          <div v-if="order1.length==0">
            <div class="space-100"></div>无待付款订单。
          </div>
          <div v-for="list in order1" class="bigCard" v-if="order1.length>0">
            <div style="text-align:left;">
              <span style="display:inline-block;padding:10px;">订单号：{{list.orderNo}}</span>
              <span style="display:inline-block;float:right;padding:10px;color:#555;font-weight:600">{{list.statusDesc}}</span>
            </div>
            <div v-for="item in list.orderItemVoList">
              <el-card style="padding-bottom:15px;text-align:left">
                <img :src="item.productImage" class="demo-checklist-img" style="display:inline-block;float:left">
                <div style="display:inline-block;margin-left:5px;height:100px;width:70%">
                  <span class="order-text">{{item.productName}}</span><br/>
                  <span class="order-text" style="color: #ccc;">颜色：粉色系  &emsp;  尺码：s</span><br/>
                  <span class="order-text" style="font-size:15px">￥{{item.totalPrice}} </span>
                  <span style="float:right">
                    <span>x {{item.quantity}}</span>
                  </span>
                </div>
              </el-card>
            </div>
            <div class="btn">
              <a @click="del(list)">取消订单</a><a style="color:#FF4040;border-color:#FF4040 !important">付款</a>
            </div>
          </div>
        </yd-tab-panel>
        <yd-tab-panel label="待发货" :active="active3">
          <div v-if="order2.length==0">
            <div class="space-100"></div>无待发货订单。
          </div>
          <div v-for="list in order2" class="bigCard" v-if="order2.length>0">
            <div style="text-align:left;">
              <span style="display:inline-block;padding:10px;">订单号：{{list.orderNo}}</span>
              <span style="display:inline-block;float:right;padding:10px;color:#555;font-weight:600">{{list.statusDesc}}</span>
            </div>
            <div v-for="item in list.orderItemVoList">
              <el-card style="padding-bottom:15px;text-align:left">
                <img :src="item.productImage" class="demo-checklist-img" style="display:inline-block;float:left">
                <div style="display:inline-block;margin-left:5px;height:100px;width:70%">
                  <span class="order-text">{{item.productName}}</span><br/>
                  <span class="order-text" style="color: #ccc;">颜色：粉色系  &emsp;  尺码：s</span><br/>
                  <span class="order-text" style="font-size:15px">￥{{item.totalPrice}} </span>
                  <span style="float:right">
                    <span>x {{item.quantity}}</span>
                  </span>
                </div>
              </el-card>
            </div>
            <div class="btn">
              <a>再次购买</a><a>查看物流</a><a style="color:#FF4040;border-color:#FF4040 !important">确认收货</a>
            </div>
          </div>
        </yd-tab-panel>
        <yd-tab-panel label="待收货" :active="active4">
          <div v-if="order3.length==0">
            <div class="space-100"></div>无待收货订单。
          </div>
          <div v-for="list in order3" class="bigCard" v-if="order3.length>0">
            <div style="text-align:left;">
              <span style="display:inline-block;padding:10px;">订单号：{{list.orderNo}}</span>
              <span style="display:inline-block;float:right;padding:10px;color:#555;font-weight:600">{{list.statusDesc}}</span>
            </div>
            <div v-for="item in list.orderItemVoList">
              <el-card style="padding-bottom:15px;text-align:left">
                <img :src="item.productImage" class="demo-checklist-img" style="display:inline-block;float:left">
                <div style="display:inline-block;margin-left:5px;height:100px;width:70%">
                  <span class="order-text">{{item.productName}}</span><br/>
                  <span class="order-text" style="color: #ccc;">颜色：粉色系  &emsp;  尺码：s</span><br/>
                  <span class="order-text" style="font-size:15px">￥{{item.totalPrice}} </span>
                  <span style="float:right">
                    <span>x {{item.quantity}}</span>
                  </span>
                </div>
              </el-card>
            </div>
            <div class="btn" v-if="list.statusDesc=='待收货'">
              <a>再来一单</a><a>查看物流</a><a style="color:#FF4040;border-color:#FF4040 !important">追加评价</a>
            </div>
          </div>
        </yd-tab-panel>
        <yd-tab-panel label="退款/售后" :active="active5">
          <div v-if="order4.length==0">
            <div class="space-100"></div>无退款订单。
          </div>
          <div v-for="list in order4" class="bigCard" v-if="order4.length>0">
            <div style="text-align:left;">
              <span style="display:inline-block;padding:10px;">订单号：{{list.orderNo}}</span>
              <span style="display:inline-block;float:right;padding:10px;color:#555;font-weight:600">{{list.statusDesc}}</span>
            </div>
            <div v-for="item in list.orderItemVoList">
              <el-card style="padding-bottom:15px;text-align:left">
                <img :src="item.productImage" class="demo-checklist-img" style="display:inline-block;float:left">
                <div style="display:inline-block;margin-left:5px;height:100px;width:70%">
                  <span class="order-text">{{item.productName}}</span><br/>
                  <span class="order-text" style="color: #ccc;">颜色：粉色系  &emsp;  尺码：s</span><br/>
                  <span class="order-text" style="font-size:15px">￥{{item.totalPrice}} </span>
                  <span style="float:right">
                    <span>x {{item.quantity}}</span>
                  </span>
                </div>
              </el-card>
            </div>
            <div class="btn">
              <a style="color:#FF4040;border-color:#FF4040 !important">删除订单</a>
            </div>
          </div>
        </yd-tab-panel>
      </yd-tab>
    </div>

  </div>

</template>

<script>
  import baseService from '../../axios/'
  export default {
    name: 'find',
    data() {
      return {
        message: '我的订单',
        active1: false,
        active2: false,
        active3: false,
        active4: false,
        active5: false,
        orderData: [], //全部订单
        order1: [], //待支付订单
        order2: [], //代发货订单
        order3: [], //待收货订单
        order4: [] //已取消订单
      }
    },
    mounted() {
      this.getAllOrder()
      this.getChecked()
    },
    methods: {
      //按钮的选中状态
      getChecked(){
        if(this.$store.store.state.orderbtn == "orderAll"){this.active1 = true;console.log(this.$store.store.state.orderbtn)}
        if(this.$store.store.state.orderbtn == "payfor"){this.active2 = true;}
        if(this.$store.store.state.orderbtn == "send"){this.active3 = true;}
        if(this.$store.store.state.orderbtn == "getgoods"){this.active4 = true;}
        if(this.$store.store.state.orderbtn == "orderExit"){this.active5 = true;}        
      },
      //获取订单列表
      getAllOrder() {
        baseService.post('/order/list.do').then((res) => {
          if (res.data.status == 10) {
            this.$dialog.alert({
              mes: res.data.msg
            });
            this.$router.push({
              path: '/order/login'
            })
          }
          if (res.data.status == 0) {
            console.log(res.data.data.list)
            let length = res.data.data.list.length;

            this.orderData = [];
            for (let i = 0; i < length; i++) {
              let param = new URLSearchParams();
              let orderNo = res.data.data.list[i].orderNo;
              let status = res.data.data.list[i].status;
              param.append("orderNo", orderNo);
              console.log(status)
              baseService.post('/order/detail.do', param).then((res) => {
                //获取所有订单
                this.orderData.push(res.data.data)
                //获取待支付订单
                if (status == 10) {
                  this.order1.push(res.data.data)
                }
                //获取待发货订单
                if (status == 20) {
                  this.order2.push(res.data.data)
                }
                //获取待收获订单
                if (status == 40) {
                  this.order3.push(res.data.data)
                }
                //退款订单，售后
                if (status == 0) {
                  this.order4.push(res.data.data)
                }
              })
            }
          }
        })
      },
      //取消订单
      del(list) {
        if (list.statusDesc != "已取消") {
          let param = new URLSearchParams();
          param.append("orderNo", list.orderNo);
          baseService.post('/order/cancel.do', param).then((res) => {
            this.$dialog.alert({
              mes: res.data.msg
            });
            this.getAllOrder();
          })
        } else {

        }

      }
    }
  }

</script>

<style>
  .order .content-order {
    position: fixed;
    padding-top: 13%;
    height: 100%;
    width: 100%;
  }

  .order .content-order .yd-tab-panel {
    position: fixed;
    height: 87%;
    width: 100%;
    background-color: #f2f2f2;
    overflow-y: auto !important;
  }
  /*大card */

  .content-order .bigCard {
    background-color: #fff;
    margin-bottom: 2px;
  }
  /*订单商品详情样式 */

  .demo-checklist-img {
    height: 100px;
  }

  .content-order .el-card {
    box-shadow: none;
  }

  .content-order .order-text {
    display: inline-block;
    margin-bottom: 20px;
  }
  /*框按钮样式*/

  .content-order .btn {
    display: block;
    padding: 5px;
    text-align: right;
  }

  .content-order .btn a {
    display: inline-block;
    text-align: right;
    padding: 5px 10px;
    margin: 5px;
    border-color: #ccc !important;
    border: 1px solid;
  }

</style>
